.data-piece {
	--piece-border: 1px solid rgba(255, 255, 255, .15);
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 250px;
	padding-top: 12px;
	border-radius: 10px;
	border: var(--piece-border);
	color: #fff;
}

.data-piece > .icon-box {
	--icon-box-bg: rgba(0, 0, 0, .3);
	width: 78px;
	height: 78px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: var(--piece-border);
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--icon-box-bg);
	background-color: var(--icon-box-bg);
}

.data-piece > .icon-box > img {
	width: 100%;
}

.data-piece > .piece-content {
	width: 100%;
	padding-top: 12px;
	padding-bottom: 20px;
	display: flex;
	align-items: center;
	border-bottom: var(--piece-border);
}

.data-piece > .piece-content > li {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.data-piece > .piece-content > li.prev-data {
	--data-bg-color: #5d77c9;
}

.data-piece > .piece-content > li.next-data {
	--data-bg-color: #ffaa0d;
}

.data-piece > .piece-content > li > p:first-child {
	margin-bottom: 18px;
	font-size: 22px;
	line-height: 22px;
}

.data-piece > .piece-content > li > p:last-child {
	padding: 4px 10px;
	border-radius: 10px;
	background-color: var(--data-bg-color);
	font-size: 16px;
	line-height: 16px;
}

.data-piece > .piece-footer {
	padding: 16px 0;
	font-size: 20px;
	line-height: 20px;
	text-align: center;
}